<script setup lang="ts">
import {onMounted, ref} from "vue";
import {reqOrderState, reqUserOrderInfo} from "@/api/user";
import type {AllOrderStateResponseData, Records, UserOrderInfoResponseData} from "@/api/user/type.ts";
import {useRouter} from "vue-router";
import {reqPatient} from "@/api/hospital";
import type {PatientResponseData} from "@/api/hospital/type.ts";
import type {PatientArr} from "@/api/hospital/type.ts";
import type {AllOrderState} from "@/api/user/type.ts";

let pageNo = ref<number>(1);
let pageSize = ref<number>(10);
let orderStatus = ref<String>('');
let patientId = ref<String>('');
let allOrderArr = ref<Records>([]);
let total = ref<number>(0)
let $router = useRouter();
let allUsr =  ref<PatientArr>([]);
let allOrderState = ref<AllOrderState>([])
onMounted(()=>{
getOrderInfo();
getData();
})
const getOrderInfo = async ()=>{
 let result:UserOrderInfoResponseData = await reqUserOrderInfo(pageNo.value,pageSize.value,patientId.value,orderStatus.value);
 if(result.code==200){
    allOrderArr.value = result.data.records;
    total.value = result.data.total;
 }
}
const goDetail=(row)=>{
  $router.push({path:'/user/order',query:{orderId:row.id}})
}
const getData = async ()=>{
 const result:PatientResponseData =  await reqPatient();
 const orderStateResult:AllOrderStateResponseData = await reqOrderState();
 allUsr.value = result.data;
 allOrderState.value = orderStateResult.data;
}
const changeUser = ()=>{
  getOrderInfo();
}
const changeOrderState = ()=>{
  getOrderInfo();
}
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>挂号订单</span>
      </div>
    </template>
    <el-form :inline="true">
      <el-form-item label="就诊人" style="width: 30%">
        <el-select placeholder="请选择就诊人" v-model="patientId" @change="changeUser">
          <el-option :label="item.name" v-for="item in allUsr":key="item.id" :value="item.id"></el-option>

        </el-select>
      </el-form-item>
      <el-form-item label="订单状态" style="width: 30%">
        <el-select placeholder="请选择订单状态" v-model="orderStatus" @change="changeOrderState">
          <el-option label="全部订单" value=""></el-option>
          <el-option :label="item.comment" v-for="item in allOrderState":key="item.status" :value="item.status"></el-option>

        </el-select>
      </el-form-item>
    </el-form>
    <el-table border style="margin: 10px 0px" :data="allOrderArr">
      <el-table-column label="就诊时间" prop="reserveDate"></el-table-column>
      <el-table-column label="医院" prop="hosname"></el-table-column>
      <el-table-column label="科室" prop="depname"></el-table-column>
      <el-table-column label="医生" prop="title"></el-table-column>
      <el-table-column label="服务费" prop="amount"></el-table-column>
      <el-table-column label="就诊人" prop="patientName"></el-table-column>
      <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
      <el-table-column label="操作" >
        <template #="{row}">
          <el-button type="text" @click="goDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        class="pagination"
        layout="prev, pager, next,jumper,->,sizes,total"
        :total="total"
        :page-sizes="[10,20,30,40]"
        @current-change="getOrderInfo"
        @size-change="getOrderInfo"
        >
    </el-pagination>
  </el-card>
</template>

<style scoped lang="scss">

</style>
